<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>{{ showDetail ? (isEditing ? '编辑质检记录' : `${inspectType}质检详情`) : pageTitle }}</span>
        <div v-if="showDetail" class="detail-actions">
          <el-button @click="goBackToList" type="text" class="back-btn">
            <el-icon>
              <ArrowLeft />
            </el-icon>
            返回列表
          </el-button>
          <el-button v-if="!isEditing && detailFormData.inspectStatus !== '已完成'" type="primary" @click="enableEdit">
            <el-icon>
              <Edit />
            </el-icon>
            编辑
          </el-button>
          <el-tag v-if="detailFormData.inspectStatus === '已完成'" type="success" size="large">
            质检已完成，不可编辑
          </el-tag>
        </div>
      </div>
    </template>

    <!-- 筛选表单 -->
    <el-form v-if="!showDetail" inline>
      <el-form-item label="质检订单号:">
        <el-input v-model="searchForm.inspectionId" placeholder="请输入质检订单号" @change="queryInspection()"
          clearable></el-input>
      </el-form-item>
      <el-form-item label="质检状态:">
        <el-select v-model="searchForm.inspectStatus" placeholder="质检状态" clearable filterable
          @change="queryInspection()">
          <el-option label="质检完成" value="已完成"></el-option>
          <el-option label="质检待处理" value="质检待处理"></el-option>
        </el-select>
      </el-form-item>

      <!-- 根据质检类型显示不同的筛选条件 -->
      <el-form-item v-if="inspectType === '原材料'" label="原材料类型:">
        <el-select v-model="searchForm.inspectCategory" placeholder="原材料类型" clearable filterable
          @change="queryInspection()">
          <el-option label="LED芯片" value="LED芯片"></el-option>
          <el-option label="荧光粉" value="荧光粉"></el-option>
          <el-option label="封装胶" value="封装胶"></el-option>
          <el-option label="支架" value="支架"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item v-if="inspectType === '半成品'" label="质检区域:">
        <el-select v-model="searchForm.inspectCategory" placeholder="质检区域" clearable filterable
          @change="queryInspection()">
          <el-option label="固晶" value="固晶"></el-option>
          <el-option label="焊线" value="焊线"></el-option>
          <el-option label="点粉" value="点粉"></el-option>
          <el-option label="封装" value="封装"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item v-if="inspectType === '成品'" label="产品类型:">
        <el-select v-model="searchForm.inspectCategory" placeholder="产品类型" clearable filterable
          @change="queryInspection()">
          <el-option label="LED灯泡" value="LED灯泡"></el-option>
          <el-option label="LED灯管" value="LED灯管"></el-option>
          <el-option label="LED面板灯" value="LED面板灯"></el-option>
          <el-option label="LED射灯" value="LED射灯"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="reset" type="primary">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 未质检单数统计 -->
    <div v-if="!showDetail" class="stats-section">
      <span class="stats-text">未质检单数: <span class="stats-number">{{ unInspectedCount }}</span></span>
    </div>

    <!-- 数据表格 -->
    <el-table v-if="!showDetail" :data="tableData" style="width: 100%; margin-top: 20px;" border v-loading="loading">
      <el-table-column prop="inspectionId" label="质检单号" width="140"></el-table-column>
      <el-table-column prop="inspectType" label="质检类型" width="120"></el-table-column>
      <el-table-column prop="inspectCategory" label="材料/产品类型" width="150"></el-table-column>
      <el-table-column prop="inspectorId" label="质检员ID" width="120"></el-table-column>
      <el-table-column prop="inspectStatus" label="质检状态" width="120">
        <template #default="scope">
          <el-tag :type="scope.row.inspectStatus === '已完成' ? 'success' : 'warning'">
            {{ scope.row.inspectStatus }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="inspectResult" label="质检结果" width="120">
        <template #default="scope">
          <el-tag
            :type="scope.row.inspectResult === '合格' ? 'success' : (scope.row.inspectResult === '不合格' ? 'danger' : 'info')">
            {{ scope.row.inspectResult || '待检验' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180">
        <template #default="scope">
          {{ (scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="150" fixed="right">
        <template #default="scope">
          <el-button size="small" @click="viewDetail(scope.row)" type="success">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div v-if="!showDetail" class="pagination-container">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange"></el-pagination>
    </div>

    <!-- 质检详情表单 -->
    <div v-if="showDetail" class="detail-section">
      <el-form :model="detailFormData" :rules="detailFormRules" ref="detailFormRef" label-width="120px"
        class="detail-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="检验记录ID:" prop="inspectionId">
              <el-input v-model="detailFormData.inspectionId" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="质检类型:" prop="inspectType">
              <el-input v-model="detailFormData.inspectType" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" v-if="detailFormData.lightFlux !== null && detailFormData.lightFlux !== undefined && detailFormData.lightFlux !== '' || detailFormData.colorTemp !== null && detailFormData.colorTemp !== undefined && detailFormData.colorTemp !== ''">
          <el-col :span="12" v-if="detailFormData.lightFlux !== null && detailFormData.lightFlux !== undefined && detailFormData.lightFlux !== ''">
            <el-form-item label="光通量:" prop="lightFlux">
              <el-input v-model="detailFormData.lightFlux" :disabled="!isEditing" placeholder="请输入光通量"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="detailFormData.colorTemp !== null && detailFormData.colorTemp !== undefined && detailFormData.colorTemp !== ''">
            <el-form-item label="色温:" prop="colorTemp">
              <el-input v-model="detailFormData.colorTemp" :disabled="!isEditing" placeholder="请输入色温"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="缺陷类型:" prop="defectType">
              <el-select v-model="detailFormData.defectType" :disabled="!isEditing" placeholder="请选择缺陷类型" clearable>
                <el-option label="无缺陷" value="无缺陷"></el-option>
                <el-option label="外观缺陷" value="外观缺陷"></el-option>
                <el-option label="性能缺陷" value="性能缺陷"></el-option>
                <el-option label="尺寸缺陷" value="尺寸缺陷"></el-option>
                <el-option label="其他缺陷" value="其他缺陷"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="缺陷照片:" prop="defectPhoto">
              <div v-if="!isEditing">
                <el-image v-if="detailFormData.defectPhoto" :src="detailFormData.defectPhoto"
                  style="width: 100px; height: 100px; border-radius: 6px;" fit="cover"
                  :preview-src-list="[detailFormData.defectPhoto]" preview-teleported />
                <span v-else style="color: #909399;">暂无照片</span>
              </div>
              <el-upload v-else ref="uploadRef" :auto-upload="false" action="/api/upload"
                :headers="{ 'Authorization': loginInfo.token }" :file-list="fileList" :on-change="handleFileChange"
                :on-remove="handleRemove" list-type="picture-card" :limit="1">
                <el-icon>
                  <Plus />
                </el-icon>
                <template #tip>
                  <div class="el-upload__tip">只能上传一张jpg/png文件，且不超过2MB</div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="质检员ID:" prop="inspectorId">
              <el-input v-model="detailFormData.inspectorId" :disabled="true" placeholder="请输入质检员ID"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="质检状态:" prop="inspectStatus">
              <el-select v-model="detailFormData.inspectStatus" :disabled="!isEditing" placeholder="请选择质检状态" clearable>
                <el-option label="待质检" value="待质检"></el-option>
                <el-option label="质检中" value="质检中"></el-option>
                <el-option label="已质检" value="已质检"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="质检结果:" prop="inspectResult">
              <el-select v-model="detailFormData.inspectResult" :disabled="!isEditing" placeholder="请选择质检结果" clearable>
                <el-option label="合格" value="合格"></el-option>
                <el-option label="不合格" value="不合格"></el-option>
                <el-option label="待定" value="待定"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检验数据:" prop="inspectData">
              <el-input v-model="detailFormData.inspectData" :disabled="!isEditing" type="textarea" :rows="2"
                placeholder="请输入检验数据"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="materialTypeLabel" prop="materialType">
              <el-select v-model="detailFormData.inspectCategory" :disabled="!isEditing"
                :placeholder="`请选择${materialTypeLabel}`" clearable>
                <el-option v-for="option in materialTypeOptions" :key="option.value" :label="option.label"
                  :value="option.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检验数量:" prop="inspectCount">
              <el-input v-model="detailFormData.inspectCount" :disabled="!isEditing" type="number"
                placeholder="请输入检验数量"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="处理建议:" prop="treatment">
              <el-select v-model="detailFormData.treatment" :disabled="!isEditing" placeholder="请选择处理建议" clearable>
                <el-option label="正常" value="正常"></el-option>
                <el-option label="退货" value="退货"></el-option>
                <el-option label="返工" value="返工"></el-option>
                <el-option label="报废" value="报废"></el-option>
                <el-option label="待处理" value="待处理"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理结果:" prop="treatmentResult">
              <el-input v-model="detailFormData.treatmentResult" :disabled="!isEditing"
                placeholder="请输入处理结果"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="质检标准:" prop="standardId">
              <el-select v-model="detailFormData.standardId" :disabled="!isEditing" placeholder="请选择质检标准" clearable>
                <el-option v-for="standard in qualityStandard" :key="standard.standardId"
                  :label="standard.standardName"
                  :value="standard.standardId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间:">
              <el-input v-model="detailFormData.createTime" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="更新时间:">
              <el-input v-model="detailFormData.updateTime" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div v-if="isEditing" class="edit-actions">
        <el-button @click="cancelEdit">取消</el-button>
        <el-button type="primary" @click="saveDetailData" :loading="saving">保存</el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'

import { queryQualityInspectionService, updateQualityInspectionService, listQualityStandardService } from '@/api/InspectApi'
import { ElMessage } from 'element-plus'
import { ArrowLeft, Edit, Plus, Picture } from '@element-plus/icons-vue'
import { loginInfoStore } from '@/stores/loginInfo.ts'

// 登录信息
const loginInfo = loginInfoStore()

// Props
interface Props {
  inspectType: '原材料' | '半成品' | '成品'
}

const props = defineProps<Props>()

// 页面标题
const pageTitle = computed(() => {
  return `${props.inspectType}质检录入`
})

// 搜索表单
const searchForm = ref({
  inspectionId: '',
  inspectStatus: '',
  inspectCategory: ''
})

// 表格数据
const tableData = ref([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 详情相关状态
const showDetail = ref(false)
const isEditing = ref(false)
const saving = ref(false)
const detailFormRef = ref()
const currentDetailRow = ref(null)

// 详情表单数据
const detailFormData = ref({
  inspectionId: '',
  inspectType: '',
  lightFlux: '',
  colorTemp: '',
  defectType: '',
  defectPhoto: '',
  inspectorId: '',
  inspectStatus: '',
  inspectResult: '',
  inspectData: '',
  materialType: '',
  inspectCount: '',
  treatment: '',
  treatmentResult: '',
  standardId: '',
  createTime: '',
  updateTime: '',
  inspectCategory: ''
})

// 图片上传相关
interface UploadFile {
  name: string
  url?: string
  status?: string
  raw?: File
}

const fileList = ref<UploadFile[]>([])
const uploadRef = ref()

// 详情表单验证规则
const detailFormRules = ref({
  inspectorId: [{ required: true, message: '请输入质检员ID', trigger: 'blur' }],
  inspectStatus: [{ required: true, message: '请选择质检状态', trigger: 'change' }],
  inspectResult: [{ required: true, message: '请选择质检结果', trigger: 'change' }]
})

// 根据质检类型计算材料类型标签和选项
const materialTypeLabel = computed(() => {
  switch (props.inspectType) {
    case '原材料':
      return '原材料类型'
    case '半成品':
      return '质检区域'
    case '成品':
      return '产品类型'
    default:
      return '类型'
  }
})

const materialTypeOptions = computed(() => {
  switch (props.inspectType) {
    case '原材料':
      return [
        { label: 'LED芯片', value: 'LED芯片' },
        { label: '荧光粉', value: '荧光粉' },
        { label: '封装胶', value: '封装胶' },
        { label: '支架', value: '支架' }
      ]
    case '半成品':
      return [
        { label: '固晶', value: '固晶' },
        { label: '焊线', value: '焊线' },
        { label: '点胶', value: '点胶' },
        { label: '封装', value: '封装' }
      ]
    case '成品':
      return [
        { label: 'LED灯泡', value: 'LED灯泡' },
        { label: 'LED灯管', value: 'LED灯管' },
        { label: 'LED面板灯', value: 'LED面板灯' },
        { label: 'LED射灯', value: 'LED射灯' }
      ]
    default:
      return []
  }
})

// 质检标准接口定义
interface QualityStandard {
  standardId: number
  standardName: string
}

//质检标准列表
const qualityStandard = ref<QualityStandard[]>([])

// 计算未质检单数
const unInspectedCount = computed(() => {
  return tableData.value.filter((item: any) => item.inspectStatus === '待处理').length
})

// 查询数据
const queryInspection = async () => {
  loading.value = true
  const params = {
    pageNumber: currentPage.value,
    pageSize: pageSize.value,
    inspectType: props.inspectType,
    inspectStatus: searchForm.value.inspectStatus || undefined,
    inspectCategory: searchForm.value.inspectCategory || undefined,
    inspectionId: searchForm.value.inspectionId || undefined
  }
  const result = await queryQualityInspectionService(params)
  tableData.value = result.data.records
  total.value = result.data.total
  loading.value = false
}

// 重置
const reset = () => {
  searchForm.value = {
    inspectionId: '',
    inspectStatus: '',
    inspectCategory: ''
  }
  currentPage.value = 1
  queryInspection()
}

// 查看详情
const viewDetail = async (row: any) => {
  currentDetailRow.value = row
  // 填充详情表单数据
  Object.keys(detailFormData.value).forEach(key => {
    if (row[key] !== undefined) {
      (detailFormData.value as any)[key] = row[key]
    }
  })

  // 查询质检标准列表
  const result = await listQualityStandardService({
    inspectCategory: row.inspectCategory
  })
  qualityStandard.value = result.data
  console.log(qualityStandard.value)
  showDetail.value = true
  isEditing.value = false
}

// 返回列表
const goBackToList = () => {
  showDetail.value = false
  isEditing.value = false
  currentDetailRow.value = null
  // 重新查询数据以获取最新状态
  queryInspection()
}

// 启用编辑
const enableEdit = () => {
  // 检查质检状态，如果已完成则不允许编辑
  if (detailFormData.value.inspectStatus === '已完成') {
    ElMessage.warning('质检已完成，不允许编辑')
    return
  }
  
  isEditing.value = true
  // 如果已有图片URL，初始化文件列表显示现有图片
  if (detailFormData.value.defectPhoto) {
    fileList.value = [{
      name: '现有图片',
      url: detailFormData.value.defectPhoto,
      status: 'success'
    }]
  } else {
    fileList.value = []
  }
}

// 取消编辑
const cancelEdit = () => {
  isEditing.value = false
  // 恢复原始数据
  if (currentDetailRow.value) {
    Object.keys(detailFormData.value).forEach(key => {
      if (currentDetailRow.value && currentDetailRow.value[key] !== undefined) {
        (detailFormData.value as any)[key] = (currentDetailRow.value as any)[key]
      }
    })
  }
  // 清空文件列表
  fileList.value = []
}

// 图片上传相关方法
const handleFileChange = (uploadFile: any, uploadFiles: any) => {
  const file = uploadFile.raw
  if (!file) return

  // 验证文件类型
  const isImage = file.type.startsWith('image/')
  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    // 移除无效文件
    fileList.value = []
    return
  }
  // 验证文件大小（2MB）
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB!')
    // 移除无效文件
    fileList.value = []
    return
  }

  // 创建预览URL
  const url = URL.createObjectURL(file)

  // 更新文件列表
  fileList.value = [{
    name: file.name,
    url: url,
    status: 'ready',
    raw: file
  }]
}

const handleRemove = () => {
  // 释放URL对象，避免内存泄漏
  fileList.value.forEach(file => {
    if (file.url && file.url.startsWith('blob:')) {
      URL.revokeObjectURL(file.url)
    }
  })
  fileList.value = []
  detailFormData.value.defectPhoto = ''
}

const uploadImage = async () => {
  if (fileList.value.length === 0) return null
  const formData = new FormData()
  if (fileList.value[0].raw) {
    formData.append('file', fileList.value[0].raw as File)
  }
  try {
    const response = await fetch('/api/upload', {
      method: 'POST',
      headers: {
        'Authorization': loginInfo.token
      },
      body: formData
    })

    const result = await response.json()
    if (result.code === 1) {
      return result.data // 返回图片URL
    } else {
      throw new Error(result.msg || '上传失败')
    }
  } catch (error) {
    ElMessage.error('图片上传失败: ' + (error as Error).message)
    throw error
  }
}

// 保存详情数据
const saveDetailData = async () => {
  try {
    // 如果有新选择的图片（有raw属性表示是新上传的文件），先上传图片
    if (fileList.value.length > 0 && fileList.value[0].raw) {
      console.log('上传照片')
      const imageUrl = await uploadImage()
      console.log('上传照片', imageUrl)
      if (imageUrl) {
        detailFormData.value.defectPhoto = imageUrl.url
      }
    } else if (fileList.value.length === 0) {// 如果文件列表为空，说明用户删除了图片
      detailFormData.value.defectPhoto = ''
    }

    // 过滤掉createTime和updateTime字段，这些由后端自动处理
    const { createTime, updateTime, ...updateData } = detailFormData.value
    const result = await updateQualityInspectionService(updateData) as any
    ElMessage.success(result.msg || '保存成功')
    queryInspection()
    isEditing.value = false
    fileList.value = [] // 清空文件列表
  } catch (error) {
    ElMessage.error('保存失败')
  }
}

// 分页处理
const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize
  queryInspection()
}

const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage
  queryInspection()
}


// 监听质检类型变化
watch(() => props.inspectType, () => {
  reset()
}, { immediate: false })

// 组件挂载时查询数据
onMounted(() => {
  queryInspection()
})
</script>

<style lang="scss" scoped>
.page-container {
  margin: 20px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    color: white;
    font-size: 18px;
    font-weight: bold;
  }

  .stats-section {
    margin: 16px 0;
    padding: 16px 20px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

    .stats-text {
      font-size: 14px;
      color: #333;
      font-weight: 500;

      .stats-number {
        font-weight: 600;
        color: #f56c6c;
        font-size: 16px;
        margin-left: 4px;
      }
    }
  }

  .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding: 20px 0;
  }

  .detail-section {
    margin-top: 20px;
  }

  .detail-actions {
    display: flex;
    align-items: center;
    gap: 12px;

    .back-btn {
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.2);
      border: 2px solid rgba(255, 255, 255, 0.3);
      color: #fff;
      font-weight: bold;
      padding: 8px 16px;
      border-radius: 6px;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
      }
    }

    .el-button {
      background: rgba(255, 255, 255, 0.2);
      border: 2px solid rgba(255, 255, 255, 0.3);
      color: #fff;
      font-weight: bold;
      padding: 8px 16px;
      border-radius: 6px;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
      }
    }
  }

  .edit-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 20px;
    border-top: 1px solid #e4e7ed;
    margin-top: 20px;
  }

  .detail-form {
    margin-top: 20px;
  }
}

// 卡片美化
:deep(.el-card) {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: none;
}

// 表单美化
:deep(.el-form) {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;

  .el-form-item {
    margin-bottom: 16px;
  }
}

// 按钮美化
:deep(.el-button) {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-1px);
  }

  &.el-button--primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);

    &:hover {
      background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
      box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
    }
  }

  &.el-button--success {
    background: linear-gradient(135deg, #55863e 0%, #52c41a 100%);
    border: none;

    &:hover {
      background: linear-gradient(135deg, #5aa036 0%, #73d13d 100%);
    }
  }

  &.el-button--warning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border: none;

    &:hover {
      background: linear-gradient(135deg, #e081e9 0%, #e3455a 100%);
    }
  }

  &.el-button--danger {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    border: none;

    &:hover {
      background: linear-gradient(135deg, #ff888c 0%, #fdbedc 100%);
    }
  }
}

// 表格美化
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  th {
    background-color: #f5f7fa;
    color: #606266;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid #ebeef5;
    border-right: none;
  }

  td {
    text-align: center;
    border-right: none;
  }

  .el-table__cell {
    border-right: none;
  }

  .el-table--border {
    border: none;
  }

  .el-table__inner-wrapper::before {
    display: none;
  }

  .el-table__row {
    &:hover {
      background: #f0f9ff !important;
    }

    td {
      border-right: none;
    }
  }

  .el-button {
    border-radius: 4px;
    font-size: 12px;
    padding: 6px 12px;

    &.el-button--primary {
      background: linear-gradient(135deg, #409eff 0%, #1890ff 100%);
      border: none;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(64, 158, 255, 0.4);
      }
    }
  }
}

// 图片上传组件样式
:deep(.el-upload) {
  .el-upload-dragger {
    border-radius: 6px;
    border: 2px dashed #d9d9d9;
    transition: all 0.3s;

    &:hover {
      border-color: #409eff;
    }
  }

  .el-upload-list__item {
    border-radius: 6px;
    overflow: hidden;
  }
}

// 图片预览样式
.el-image {
  border: 1px solid #dcdfe6;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    border-color: #409eff;
    transform: scale(1.05);
  }
}

// 分页美化
:deep(.el-pagination) {
  .el-pager li {
    border-radius: 4px;
    margin: 0 2px;

    &.is-active {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
    }
  }

  .btn-prev,
  .btn-next {
    border-radius: 4px;
  }
}
</style>